<template>
  <div class="app-container">
    <el-container>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card class="box-card">
              <div
                v-if="listData.postfix === 'png' || listData.postfix === 'jpg'"
              >
                <img :src="videoJob.videoUrl" alt="dark" />
              </div>

              <div
                v-if="listData.postfix === 'mp4' || listData.postfix === 'mkv'"
                v-loading="loading"
                class="video-box"
              >
                <video
                  id="myVideo"
                  ref="videoPlayer"
                  class="video-js vjs-big-play-centered vjs-fluid"
                  controls
                  preload="auto"
                  width="100%"
                  playsinline="true"
                  autoplay
                  height="100%"
                  loop
                >
                  <source type="video/mp4" :src="videoJob.videoUrl" />
                </video>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card">
              <el-table
                v-loading="loading"
                :data="backupList"
                style="width: 100%"
                max-height="550px"
              >
                <el-table-column type="index" label="序号" width="50" />
                <el-table-column
                  label="key"
                  width="155"
                  align="center"
                  prop="key"
                />
                <el-table-column label="value" align="center" prop="value">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.value"
                      placeholder="请输入value值"
                      clearable
                      @keyup.enter.native="handleQuery"
                    />
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
        <el-row style="text-align: left; margin: 34px 0">
          <span>当前未打标数据是：</span>
          <span>{{ noAnnotationNumber }}</span>
        </el-row>
      </el-main>
      <el-footer>
        <el-button type="info" :disabled="prevDisabled" @click="prevItem"
          >上一条</el-button
        >
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
        <el-button type="success" :loading="submitLoading" @click="submit"
          >提 交</el-button
        >
        <el-button type="info" :disabled="nextDisabled" @click="nextItem"
          >下一条</el-button
        >
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import {
  queryDataAnnotationList,
  queryDetailPageData,
  saveSubmitDetailPageData
} from '@/api/dataAnnotation/dataAnnotation'

export default {
  name: 'DetailPage',
  components: {},
  data() {
    return {
      prevDisabled: false,
      nextDisabled: false,
      noAnnotationNumber: null,
      toAnnotationData: [],
      currentId: '',
      backupList: [],
      videoJob: {
        // width: 1920,
        // height: 1080,
        videoUrl: ''
      },
      // 遮罩层
      submitLoading: false,
      annotationFlag: false,
      loading: false,
      detailPageTableData: [],
      // 显示搜索条件
      showSearch: true,
      // 字段资源表格数据
      templateFieldList: [],
      listData: {},
      searchParams: {
        pageNum: 1,
        pageSize: 999,
        id: '',
        resourceId: '',
        templateId: '',
        fileName: '',
        templateName: ''
      },
      // 弹出层标题
      title: '',
      submitedNextId: '',
      submitedPrevId: '',
      // 是否显示弹出层
      open: false,
      form: {},
      submitedNextObj: {},
      submitedPrevObj: {}
    }
  },
  watch: {
    'videoJob.videoUrl': function() {
      this.loading = false
    }
  },
  created() {
    const dictId = this.$route.params && this.$route.params.rowId
    this.currentId = dictId
    this.getDetailList(dictId)
    this.getList()
  },
  methods: {
    // 获取待审核数据
    getList() {
      queryDataAnnotationList(this.searchParams).then(response => {
        if (response.code === 200 && response.rows) {
          this.noAnnotationNumber = response.total
          this.toAnnotationData = response.rows
        } else {
          this.$message.error(response.msg)
        }
      })
    },

    prevItem() {
      let obj = {}
      this.toAnnotationData.map((item, index) => {
        if (Number(this.currentId) === Number(item.jobId)) {
          if (index === 0) {
            obj = this.toAnnotationData[this.toAnnotationData.length - 1]
          } else {
            obj = this.toAnnotationData[index - 1]
          }
        } else if (
          this.annotationFlag &&
          Number(this.submitedPrevId) === Number(item.jobId)
        ) {
          obj = this.toAnnotationData[index]
        }
      })
      this.clearData()
      this.getDetailList(obj.jobId)
      this.currentId = obj.jobId
    },

    nextItem() {
      let obj = {}
      this.toAnnotationData.map((item, index) => {
        if (Number(this.currentId) === Number(item.jobId)) {
          if (index === this.toAnnotationData.length - 1) {
            obj = this.toAnnotationData[0]
          } else {
            obj = this.toAnnotationData[index + 1]
          }
        } else if (
          this.annotationFlag &&
          Number(this.submitedNextId) === Number(item.jobId)
        ) {
          obj = this.toAnnotationData[index]
        }
      })
      this.clearData()
      this.getDetailList(obj.jobId)
      this.currentId = obj.jobId
    },

    clearData() {
      this.videoJob.videoUrl = ''
      this.backupList = []
      this.annotationFlag = false
    },

    //  查询列表
    getDetailList(id) {
      if (!id) {
        this.$message.error('暂无可查询的id！')
        return
      }
      this.loading = true
      queryDetailPageData(id)
        .then(response => {
          if (response.code === 200 && response.data) {
            this.listData = response.data
            this.videoJob.videoUrl = response.data.uploadPath

            this.$nextTick(() => {
              const vdo = document.getElementById('myVideo')
              vdo.src = response.data.uploadPath
              vdo.play()
            })

            const backupObj = JSON.parse(response.data.backup1)

            for (const [key, value] of Object.entries(backupObj)) {
              this.backupList.push({
                key: key,
                value: value
              })
            }
          } else {
            this.$message.error(response.msg)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 取消返回按钮
    cancel() {
      this.$router.go(-1)
    },

    // 保存按钮
    save() {
      const result = Object.assign(
        ...this.backupList.map(el => ({ [el.key]: el.value }))
      )

      const data = {
        id: this.listData.jobId,
        resourceId: this.listData.fileId,
        status: '2',
        backup1: JSON.stringify(result),
        backup2: '',
        person: this.$store.getters.name
      }
      saveSubmitDetailPageData(data).then(response => {
        this.msgSuccess('修改成功')
      })
    },

    // 提交按钮
    submit() {
      const result = Object.assign(
        ...this.backupList.map(el => ({ [el.key]: el.value }))
      )
      const data = {
        id: this.listData.jobId,
        resourceId: this.listData.fileId,
        status: '3',
        backup1: JSON.stringify(result),
        backup2: '',
        person: this.$store.getters.name
      }
      saveSubmitDetailPageData(data)
        .then(response => {
          this.msgSuccess('提交成功')
          this.annotationFlag = true
        })
        .finally(() => {
          this.getList()
          this.getSubmitedId()
        })
    },

    getSubmitedId() {
      this.toAnnotationData.map((item, index) => {
        if (Number(this.listData.jobId) === Number(item.jobId)) {
          if (index === 0) {
            this.submitedPrevId = this.toAnnotationData[
              this.toAnnotationData.length - 1
            ].jobId
            this.submitedNextId = this.toAnnotationData[index + 1].jobId
          } else if (index === this.toAnnotationData.length - 1) {
            this.submitedNextId = this.toAnnotationData[0].jobId
            this.submitedPrevId = this.toAnnotationData[index - 1].jobId
          } else {
            this.submitedNextId = this.toAnnotationData[index + 1].jobId
            this.submitedPrevId = this.toAnnotationData[index - 1].jobId
          }
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
}
.el-main {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  height: 720px;
}

body > .el-container {
  margin-bottom: 40px;
}
.video-box {
  display: flex;
  justify-content: center;
  // flex: 1 1 auto;
  height: 550px;

  video {
    height: 100%;
    box-shadow: 3px 2px 7px #777;
  }
}
.list .list-li {
  list-style-type: none;
  display: flex;
  height: 48px;
  line-height: 48px;
  .list-index {
    width: 60px;
    border: 2px solid #f4f4f4;
    margin: 0 0 -1px -1px;
    position: relative;
    z-index: 0;
  }
  .list-key {
    width: 150px;
    border: 2px solid #f4f4f4;
    margin: 0 0 -1px -1px;
    position: relative;
    z-index: 0;
  }
  .list-value {
    flex: 1;
    border: 2px solid #f4f4f4;
    margin: 0 0 -1px -1px;
    position: relative;
    z-index: 0;
  }
}
.main-right {
  height: 550px;
  overflow-y: auto;
}
.main-right::-webkit-scrollbar {
  display: none;
}
</style>
